<template>
  <div>
    <div class="page_title">文件类型统计</div>
    <div class="page_body">
      <section class="echa" ref="statisticsRefs"></section>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ApiPerClassifyAll } from '@/api/personDoc/personDocApi';
import { ref, onMounted, reactive, Ref } from 'vue';
import * as echarts from 'echarts';

// 定义响应式数据
const xAxisDataList = ref<string[]>([]);
const seriesData = ref<number[]>([]);

// 获取 DOM 引用
const statisticsRefs = ref<HTMLElement | null>(null);

// 获取数据
const getData = () => {
  let oParam = {
    libraryType: 'personal'
  };

  ApiPerClassifyAll(oParam).then((res) => {
    // 获取前 8 条数据
    let arr = res.data.slice(0, 8);
    arr.forEach((element: any) => {
      xAxisDataList.value.push(element.typeName);
      seriesData.value.push(element.fileSize);
    });

    // 数据加载完后绘制图表
    if (statisticsRefs.value) {
      getList();
    }
  });
};

// 初始化和绘制图表
const getList = () => {
  // 确保 DOM 元素存在再初始化 ECharts
  if (statisticsRefs.value) {
    const myChart = echarts.init(statisticsRefs.value); // 初始化echarts实例
    myChart.showLoading({
      text: '正在努力加载,请稍后...'
    });

    // 配置 ECharts 图表
    myChart.setOption({
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      xAxis: {
        type: 'category',
        data: xAxisDataList.value,
        axisLabel: {
          show: true, // 是否显示X轴的内容，不包含两端的文字
          interval: 0,
          lineHeight: 18,
          formatter: function (params) {
            var newParamsName = '';
            var paramsNameNumber = params.length;
            var provideNumber = 6;
            if (paramsNameNumber > provideNumber) {
              newParamsName = params.substring(0, 6) + '..';
            } else {
              newParamsName = params;
            }
            return newParamsName;
          }
        }
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: seriesData.value,
          type: 'bar',
          itemStyle: {
            color: '#1890ff' // 设置柱状图颜色
          }
        }
      ]
    });

    // 数据加载完成后隐藏加载动画
    myChart.hideLoading();

    // 给window添加resize监听事件，当窗口尺寸发生变化时重置图表大小
    window.addEventListener('resize', () => {
      myChart.resize();
    });
  }
};

// 在组件挂载时调用获取数据函数
onMounted(() => {
  getData();
});
</script>

<style scoped lang="scss">
.page_title {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
}
.page_body {
  width: 100%;
  .echa {
    width: 100%;
    height: 400px;
  }
}
</style>
